<template>
  <div class="order-item">
    
    <headNav title="服务协议"></headNav>
    <div class="order-body">
      <iframe class="iframeStyle" src="static/xieyi.html"></iframe>
    </div>
    <div class="item-buy" @click="goBuy">同意</div>
    <div class="item-buy item-buy2" @click="goIndex">拒绝</div>
    <!-- 支付 -->
    <div class="zhifu_box" v-show="isShowPay">
			<div class="tan_black"></div>
			<div class="zhifu">
				<h2>
					<span class="xueerqin">骆米</span>
					<span class="quxiao" @click="hidePay">取消</span>
				</h2>
				<div class="bottom_zhi">
					<ul>
						<li>
              <span>套餐名称 </span>
              <p v-if="activeData.Name">{{activeData.Name}} </p>
              <p v-else>{{activeData.PackageName}} </p>
            </li>
						<li>
							<span>学生姓名 </span>
							<p class="b-1">
								<label><input type="radio" name="lgy" checked ><span></span>{{activeData.Studentname}}</label>
							</p>
						</li>
						<li>
              <span style="padding-top:0.05rem;">套餐价格</span>
              <p class="p-1" v-if="activeData.Money">￥{{activeData.Money}}</p>
              <p class="p-1" v-else>￥{{activeData.Amount}}</p>
            </li>
						<li>
							<span>支付方式</span>
							<p class="b-2">
								<!-- <label><input type="radio" name="fs" v-model="activeData.PaymentType" value="2"><span></span><i class="zfb">支付宝支付</i></label> -->
								<label><input type="radio" name="fs" v-model="activeData.PaymentType" value="1"><span></span><i class="wx">微信支付</i></label>
							</p>
						</li>
						<li><a class="zf" @click="payWeixinMoney">支付</a></li>
					</ul>
				</div>
			</div>
		</div>
  </div>
</template>
<script>
import {mapState, mapGetters} from 'vuex'
import {toHanZi,getCookie,getQueryString} from '@/util/tool'
import {mappv2Url} from '@/config/config'
import headNav from '@/components/headNav/headNav';
import {menuUrl} from '@/config/config'
export default {
    name: 'orderList',
    components: {
      headNav
    },
    data () {
      return {
        menus: ['内含', '套餐详情'],
        activeIndex: 0,
        isShowPay: false,
        activeData: {},
        orderType: 1,
        chargeId: ''
      }
    },
    created () {
      this.activeData = JSON.parse(this.$route.query.activeData)
      this.chargeId = this.$route.query.chargeId
      // console.log(this.chargeId)
      // console.log(this.activeData)
    },
    methods: {
      activeItem (index) {
        this.activeIndex = index
      },
      goBack () {
        this.$router.push('/vip')
      },
      goHome () {
        location.href = menuUrl
      },
      hidePay () {
        this.isShowPay = false
      },
      goBuy () {
        this.isShowPay = true
      },
      goIndex () {
        this.$router.push('index')
      },
      payWeixinMoney () {
        var params = {}
        if(this.orderType==2){
            params = {
            // type: this.type,
            type: 1,
            studentId: this.activeData.studentId,
            orderType: this.orderType,
            chargeId: this.chargeId,
            PackageId: this.activeData.PId,
            OperatorId: getCookie('loginUserId'),
            payType: 2,
            // openId: 'oTpYmw2L_pi_bvtWTuvhkIKe1dn8',
            openId: getCookie('OpenId')
          }
        }else{
          params = {
            // type: this.type,
            type: 1,
            studentId: this.activeData.studentId,
            orderType: this.orderType,
            chargeId: this.chargeId,
            PackageId: this.activeData.PackageId,
            OperatorId: getCookie('loginUserId'),
            payType: 2,
            // openId: 'oTpYmw2L_pi_bvtWTuvhkIKe1dn8',
            openId: getCookie('OpenId')
          }
        }
        var paramsNew = {
          data: params
        }
        localStorage.setItem('payItem',JSON.stringify(paramsNew))
        localStorage.setItem('pageFrom','index')
        location.href = mappv2Url + '/study/static/html/pay.html?pageFrom=index&payItem=' + JSON.stringify(paramsNew)
        // location.href = '../../../../../static/html/pay.html'
      }
    }
}
</script>
<style scoped src="./css/public.css"></style>
<style scoped src="./css/vip.css"></style>
<style scoped>

  /* @import url('./css/public.css');
  @import url('./css/vip.css'); */
  .iframeStyle{
    border: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .order-item{
   
    /* padding-bottom: 3.1rem;  */
  }
  .order-item .header{
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    font-size: 0.3rem;
    color: #fff;
    background: #0a8de5;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  .order-item .header-left{
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    background: url('./img/head-left.png') no-repeat 0 0;
    top: 0.2rem;
    left:0.2rem;
    background-size: cover;
  }
  .order-item .header-right{
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    background: url('./img/head-right.png') no-repeat 0 0;
    top: 0.2rem;
    right: 0.2rem;
    background-size: cover;
  }
  .order-item .order-body{
    background: #fff;
    padding: 0.3rem 0.2rem;
    margin-bottom: 0.2rem;
    height: calc(100% - 2.7rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .order-item .order-body p{
    line-height: 0.4rem;
  }
  .order-item .order-body h3{
    font-size: 0.32rem;
    margin-bottom: 0.05rem;
  }
  .order-item .order-body h3 em{
    float: right;
    font-size: 0.33rem;
    color: #0a8de5;
  }
  .order-item .order-body p i{
    color: #888888;
    font-size: 0.24rem;
    margin-top: 0.1rem;
    display:inline-block;
  }
  .order-item .order-content{
    background: #fff;
    margin-bottom: 0.2rem;
  }
  .order-item .order-menu ul li{
    display: inline-block;
    height: 0.86rem;
    line-height: 0.86rem;
    padding: 0 0.3rem;
  }
  .order-item .order-menu ul{
    margin-left: 0.2rem;
  }
  .order-item .order-menu li{
    font-size: 0.3rem;
  }
  .order-item .order-menu li.active{
    color: #0a8de5;
    border-bottom: 2px solid #0a8de5;
  }
  .order-item .order-menu{
    border-bottom: 1px solid #ccc;
  }
  .order-item .item-buy{
    height: 0.86rem;
    width: 2.12rem;
    background: #0a8de5;
    text-align: center;
    line-height: 0.86rem;
    margin-top: 0.2rem;
    color: #fff;
    border-radius: 4px;
    margin: 0 auto;
    font-size: 0.36rem;
    float: left;
    margin-left: 54px;
  }
  .item-buy2{
    color:  #0a8de5 !important;
    background-color: #fff !important;
    border: 1px solid #0a8de5 !important;
  }
  .order-item .content-item{
    padding: 0.26rem 0.38rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .order-item .content-item span{
    font-size: 0.28rem;
  }
  .order-item .content-item i{
    font-size: 0.24rem;
    color: #888;
    margin-top: 0.15rem;
    display:inline-block;
  }
  .order-item .content-item em{
    font-size: 0.28rem;
    color: #000;
    margin-left: 0.2rem;
  }
  .order-item .section-item {
    font-size: 0.24rem;
    margin-top: 0.36rem;
    margin-bottom: 0.24rem; 
    line-height: 0.35rem;
  }
  .order-item .section-item p{
    line-height: 0.4rem;
  }
  .new-detail{
    padding: 0 0.3rem 0.3rem;
    line-height: 0.45rem;
  }
</style>
